<template>
  <div class="flex mg-t-30">
    <div id="zhihuigongdi-shujutongji" style="height:220px;width:220px"></div>
    <ul class="anjian-list">
      <li>
        <span>便民热线</span
        ><span class="num-value">{{ AnJianShuLiang.bmNum }}</span
        ><span>件</span>
      </li>
      <li>
        <span>数字城管</span
        ><span class="num-value">{{ AnJianShuLiang.szNum }}</span
        ><span>件</span>
      </li>
      <li>
        <span>其他来源</span
        ><span class="num-value">{{ AnJianShuLiang.otherNum }}</span
        ><span>件</span>
      </li>
    </ul>
  </div>
</template>

<script>
let chartSJTJ = null
import { ZhiHuiGongDiDB } from '@/api'

export default {
  data() {
    return {
      AnJianShuLiang: {},
    }
  },
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (chartSJTJ == null) {
      echarts
        .init(document.getElementById('zhihuigongdi-shujutongji'))
        .dispose()
    }
  },
  methods: {
    initChart() {
      ZhiHuiGongDiDB.getShuJuTongJi().then((res) => {
        chartSJTJ = echarts.init(
          document.getElementById('zhihuigongdi-shujutongji')
        )
        let colorArr = ['#2C61FF', '#35CFE8', '#B31AC6']
        const datas = (this.AnJianShuLiang = res.data[0])
        let chartSJTJData = [
          {
            name: '便民案件',
            value: datas.bmNum,
          },
          {
            name: '数字城管',
            value: datas.szNum,
          },
          {
            name: '其他',
            value: datas.otherNum,
          },
        ]

        let seriesData = []

        for (let i = 0; i < chartSJTJData.length; i++) {
          seriesData.push({
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [100 - i * 15 + '%', 90 - i * 15 + '%'],
            center: ['50%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: chartSJTJData[i].value,
                name: chartSJTJData[i].name,
              },
              {
                value: datas.num - chartSJTJData[i].value,
                name: '背景区',
                itemStyle: {
                  color: '#282B4E',
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: (datas.num / 0.75) * 0.25,
                name: '透明区',
                itemStyle: {
                  color: 'rgba(0,0,0,0)',
                },
              },
            ],
          })
        }

        let option = {
          title: [
            {
              text: '{value|' + datas.num + '}\n{val|案件采集总量}',
              top: '40',
              left: '135',
              textStyle: {
                rich: {
                  value: {
                    fontSize: 32,
                    fontWeight: 'bold',
                    fontFamily: 'ShiShangZhongHeiJianTi',
                    color: '#0ECEFF',
                  },
                  name: {
                    fontSize: 14,
                    fontWeight: 'normal',
                    fontFamily: 'ShiShangZhongHeiJianTi',
                    color: '#cccccc',
                    padding: [-10, 0, 0, 0],
                  },
                  val: {
                    fontSize: 14,
                    fontFamily: 'ShiShangZhongHeiJianTi',
                    color: '#ffff',
                  },
                },
              },
            },
          ],
          color: colorArr,
          series: seriesData,
          grid: {
            top: 0,
            bottom: 0,
          },
        }

        chartSJTJ.setOption(option)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.anjian-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 30px;

  li {
    border-bottom: 1px dashed #c9cdd6;
    position: relative;
    padding: 10px 0;
    color: #ffffff;
    padding-left: 40px;
    display: flex;
    align-items: center;

    &:after {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 4px solid;
      background-color: transparent;
      position: absolute;
      left: 0;
      bottom: 10px;
    }

    &:nth-child(1)::after {
      border-color: #2c61ff;
    }

    &:nth-child(2):after {
      border-color: #35cfe8;
    }

    &:nth-child(3):after {
      border-color: #b31ac6;
    }

    span:nth-child(1) {
      width: 130px;
    }

    span:nth-child(2) {
      width: 50px;
      display: inline-block;
      text-align: right;
    }

    span:nth-child(3) {
      font-size: 12px;
    }

    & span:nth-child(2) {
      font-weight: bold;
    }

    & span:nth-child(3) {
      margin-top: 4px;
    }

    &:nth-child(1) span:nth-child(2) {
      color: #2c61ff;
    }

    &:nth-child(2) span:nth-child(2) {
      color: #35cfe8;
    }

    &:nth-child(3) span:nth-child(2) {
      color: #b31ac6;
    }
  }
}
</style>
